import React, { FC, useEffect, useState } from 'react'
import ChartLine from '@/components/pages/chartLine'
import ChartPie from '@/components/pages/chartPie'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import SaleInfo from './saleInfo'
import { IPieChart, ISale, ISaleFull } from '@/types/pages/salesAnalysis/interface'
import { inject, observer, PropTypes } from "mobx-react";
import ChartColumn from '@/components/pages/chartColumn' 
import AddAndDel from '@/components/pages/customer/addAndDel'
import Income from  '@/components/pages/customer/income'
import Salebar from '@/components/pages/customer/bar'
import chinaMap from '@/assert/images/salesAnalysis/china.png'
import nanhai_sea from '@/assert/images/salesAnalysis/nanhai_sea.png' 
import backFrame from '@/assert/images/customer/backFrame.png'
import customerImg from '@/assert/images/customer/customer.png'
import packageImg from '@/assert/images/customer/package.png'
import cornImg from '@/assert/images/customer/corn.png'


const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    .left{
      flex:1 1 48%;
      display: flex;
      flex-direction: column;
      .sale{
        flex:1 1 55%;
        display: flex;
        flex-direction: column;
        background: url(${backFrame});
        background-size: 100% 100%;
        .top{
          flex:1 1 62%;
          display: flex;
          flex-direction: row;
          .sale-count,.sale-money,.sale-contract{
            flex:1
           } 
        }
        .bottom{
          flex:1 1 38%;
          display: flex;
          flex-direction: row;
      
          .sale-count,.sale-money,.sale-contract{
            margin-top: 2rem;
            flex:1;
            display: flex; 
            align-content:center;
            justify-content: center;
            /* border:1px solid #0A4F89 */
          }
        }
   
      }
      .map{
        flex:1 1 45%;
        position:relative;
        background-image: url(${backFrame});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .map-content{
        width: 100%;
        height: 100%;
        background-image: url(${chinaMap});
        background-position-x: 30%;
        background-position-y: 30%;
        background-size: 80% 80%;
        background-repeat: no-repeat;
      }
      .map-content:after{
        content: "";
        position: absolute;
        width: 10.2rem;
        height: 14.1rem;
        bottom: 6rem;
        right: 6rem;
        background-image: url(${nanhai_sea});
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
      }
    }
    .right{
      flex:1 1 52%;
      display: flex;
      flex-direction: column;
      .chart-pie{
        flex:1 1 55%; 
        display: flex;
        .left-pie,.right-pie{
          flex:1;
        }
      }
      .chart-line{
        flex:1 1 45%; 
      }
    }
`


const Content: FC<{}> = function () {
  const store = useStores();
  const { saleInfoCustomer, saleInfoMoney,saleInfoContract, pieLeftChart,columnChart, pieRightChart, lineChart } = store.customer.screenData;
  const fnCallBack: FnCallBack = (data: Partial<ISaleFull>) => {
    store.header.srtScreenData(data);
    store.header.setHeaderName('客户分析');
    document.title = '客户分析';
  };
  useEffect(() => {
    store.sale.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.customer.getScreenData(type, date)
      fnCallBack<Partial<ISaleFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='left'>
        <div className='sale'>
          <div className='top'>
            <div className='sale-count'>
               <SaleInfo name='客户数量' {...saleInfoCustomer}  img={customerImg} title='总人数'/>
            </div>
            <div className='sale-money'> 
            <SaleInfo name='销售额' {...saleInfoMoney} img={cornImg}  title='总收入'  />
            </div>
            <div className='sale-contract' >
            <SaleInfo name='销售合同'{...saleInfoContract} img={packageImg}  title='总金额' />
            </div>
          </div>
          <div className='bottom'>
            <div className='sale-count'>
              <AddAndDel addText="新增" addNum={saleInfoCustomer.addNum!} freeze="冻结" freezeNum={saleInfoCustomer.freezeNum!} />
            </div>
            <div className='sale-money'>
              <Income text="平均客户收入" num={saleInfoMoney.num!} unit={saleInfoMoney.unit!} />
            </div>
            <div className='sale-contract'> 
              <Salebar text="计划完成进度" totalNum={saleInfoContract.totalNum!} saleNum={saleInfoContract.saleNum!} />
            </div>
          </div>
        </div>
        <div className='map'><ChartColumn title="客户销售排名top10" dataset={columnChart.dataset!} /> </div>
      </div>
      <div className='right'>
        <div className='chart-pie'>
          <div className='left-pie'>
            <ChartPie title={pieLeftChart.title!} dataset={pieLeftChart.dataset} />
          </div>
          <div className='right-pie'>
            <ChartPie title={pieRightChart.title!} dataset={pieRightChart.dataset} />
          </div>
        </div>
        <div className='chart-line'>
          <ChartLine title={lineChart.title!} dataset={lineChart.dataset!} />
        </div>
      </div>

    </ContentFrame>
  )
}

export default observer(Content) 
